<script setup>
import { onMounted, ref } from 'vue'

const props = defineProps({
  imgUrlList: {
    type: Array,
    default: () => ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
  },
  imgStyle: {
    type: String,
    default: () => ''
  }
})

const emit = defineEmits(['imageClosedHandle'])

onMounted(() => {})
</script>
<template>
  <div class="image-preview">
    <el-image
      :style="`width: ${imgStyle}; height: ${imgStyle}`"
      :src="imgUrlList[0]"
      :preview-src-list="imgUrlList"
    ></el-image>
    <i class="closed-btn el-icon-error" @click.stop="emit('imageClosedHandle')"></i>
  </div>
</template>
<style lang="scss">
.image-preview {
  position: relative;
  .el-icon-error {
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    line-height: 20px;
  }
  .el-icon-error {
    font-size: 20px;
    color: #e03535;
    transition: 0.3s all ease-in-out;
    &:hover {
      color: #cc5555;
    }
  }
}
</style>
